<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支持移动触摸设备的简洁js幻灯片插件|DEMO_爱编程w2bc.com</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="./vendor/railscasts.css" />
    <!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
    <div class="htmleaf-container">
        <div class="htmleaf-content">
            <section class="examples">
                <h2>
                    Single element</h2>
                <div class="slider js_simple simple">
                    <div class="frame js_frame">
                        <ul class="slides js_slides">
                            <li class="js_slide">1</li>
                            <li class="js_slide">2</li>
                            <li class="js_slide">3</li>
                            <li class="js_slide">4</li>
                            <li class="js_slide">5</li>
                            <li class="js_slide">6</li>
                        </ul>
                    </div>
                    <span class="js_prev prev">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z" />
                            </g></svg>
                    </span><span class="js_next next">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z" />
                            </g></svg>
                    </span>
                </div>
                <div class="examplecode">
                    
                </div>
                <h2>
                    Variable width</h2>
                <div class="slider js_variablewidth variablewidth">
                    <div class="frame js_frame">
                        <ul class="slides js_slides">
                            <li class="js_slide" style="width: 220px;">220</li>
                            <li class="js_slide" style="width: 190px;">190</li>
                            <li class="js_slide" style="width: 150px;">150</li>
                            <li class="js_slide" style="width: 130px;">130</li>
                            <li class="js_slide" style="width: 250px;">250</li>
                            <li class="js_slide" style="width: 180px;">180</li>
                            <li class="js_slide" style="width: 200px;">200</li>
                            <li class="js_slide" style="width: 140px;">140</li>
                            <li class="js_slide" style="width: 120px;">120</li>
                            <li class="js_slide" style="width: 240px;">240</li>
                        </ul>
                    </div>
                    <span class="js_prev prev">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z" />
                            </g></svg>
                    </span><span class="js_next next">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z" />
                            </g></svg>
                    </span>
                </div>
                <div class="examplecode">
                    
                </div>
                <h2>
                    Multiple slides to scroll</h2>
                <div class="slider js_multislides multislides">
                    <div class="frame js_frame">
                        <ul class="slides js_slides">
                            <li class="js_slide">1</li>
                            <li class="js_slide">2</li>
                            <li class="js_slide">3</li>
                            <li class="js_slide">4</li>
                            <li class="js_slide">5</li>
                            <li class="js_slide">6</li>
                            <li class="js_slide">7</li>
                            <li class="js_slide">8</li>
                            <li class="js_slide">9</li>
                            <li class="js_slide">10</li>
                            <li class="js_slide">11</li>
                            <li class="js_slide">12</li>
                        </ul>
                    </div>
                    <span class="js_prev prev">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z" />
                            </g></svg>
                    </span><span class="js_next next">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z" />
                            </g></svg>
                    </span>
                </div>
                <div class="examplecode">
                    
                </div>
                <h2>
                    Custom easings</h2>
                <div class="slider js_ease ease">
                    <div class="frame js_frame">
                        <ul class="slides js_slides">
                            <li class="js_slide">1</li>
                            <li class="js_slide">2</li>
                            <li class="js_slide">3</li>
                            <li class="js_slide">4</li>
                            <li class="js_slide">5</li>
                            <li class="js_slide">6</li>
                            <li class="js_slide">7</li>
                            <li class="js_slide">8</li>
                            <li class="js_slide">9</li>
                            <li class="js_slide">10</li>
                            <li class="js_slide">11</li>
                            <li class="js_slide">12</li>
                        </ul>
                    </div>
                    <span class="js_prev prev">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z" />
                            </g></svg>
                    </span><span class="js_next next">
                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 501.5 501.5">
                            <g>
                                <path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z" />
                            </g></svg>
                    </span>
                </div>
                <div class="
                
                ">
                    
                </div>
            </section>
        </div>
    </div>
    <script src="vendor/highlight.js"></script>
    <script>        hljs.initHighlightingOnLoad();</script>
    <script src="dist/lory.min.js"></script>
    <script>
        'use strict';

        document.addEventListener('DOMContentLoaded', function () {
            var simple = document.querySelector('.js_simple');
            var variableWidth = document.querySelector('.js_variablewidth');
            var multiSlides = document.querySelector('.js_multislides');
            var ease = document.querySelector('.js_ease');

            lory(simple, {
                infinite: 1
            });

            lory(variableWidth, {
                rewind: true
            });

            lory(multiSlides, {
                infinite: 4,
                slidesToScroll: 4
            });

            lory(ease, {
                infinite: 4,
                slidesToScroll: 4,
                slideSpeed: 300,
                ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
            });
        });
    </script>

<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
